<template>
   <div id="heIndex" v-elastic="{bufferY:15}">
       <div class="updateLoading" v-show="isLoadind">
            <mt-spinner type="fading-circle"></mt-spinner>
       </div>
       <mt-swipe @change="handleChange" :class="{silde:true}">
            <mt-swipe-item>
                <div class="bg bg1"></div>
            </mt-swipe-item>
            <mt-swipe-item>
                <div class="bg bg2"></div>
            </mt-swipe-item>
            <mt-swipe-item>
                <div class="bg bg3"></div>
            </mt-swipe-item>
        </mt-swipe>
        <br>
        <mt-button type="primary" size="large" @click.native="routerClick('/he/login')">登录</mt-button>
        <br>
        <mt-button type="danger" size="large" @click.native="routerClick('/he/register')">注册</mt-button>
        <br>
        <mt-button type="default" size="large" @click.native="routerClick('/he/other')">Other</mt-button>
        <p v-for="(item,i) in list">
            {{item}}
        </p>
        <div class="test">
            <div class="picker-top">
                <p>当前选择的时间是:{{year}}-{{month}}-{{day}}</p>
            </div>
            <div class="picker-year">
            <ul>
                <li @click="jian('vyear')">-</li>
                <li><input type="text" value="year" readonly ref="vyear"></li>
                <li @click="jia('vyear')">+</li>
            </ul>
            </div>
            <div class="picker-month">
            <ul>
                <li @click="jian('vmonth')">-</li>
                <li><input type="text" value="month" readonly ref="vmonth"></li>
                <li @click="jia('vmonth')">+</li>
            </ul>
            </div>
            <div class="picker-day">
            <ul>
                <li @click="jian('vday')">-</li>
                <li><input type="text" value="day" readonly ref="vday"></li>
                <li @click="jia('vday')">+</li>
            </ul>    
            </div>
            <div class="picker-bot">
                <button>确定</button>
                <button>取消</button>
            </div>
        </div>
   </div>
</template>

<script>
export default {
  methods: {
    handleChange(index) {
       // console.log(index)
    },
    routerClick(path){
        this.$router.push(path)
    },
    jia(node) {
      var num = Number(this.$refs[node].value);
      if (num >= 12 && node == "vmonth") {
        return;
      }
      if (num >= 31 && node == "vday") {
        return;
      }
      if (this.month == "02" && node == "vday" && this.day >= 28) {
        return;
      }
      this.$refs[node].value = num + 1 < 10 ? "0" + (num + 1 + "") : num + 1;
      switch (node) {
        case "vyear":
          this.year = this.$refs[node].value;
          break;
        case "vmonth":
          this.month = this.$refs[node].value;
          break;
        case "vday":
          this.day = this.$refs[node].value;
          break;
      }
    },
    jian(node) {
      var num = Number(this.$refs[node].value);
      if (num <= 1) {
        return;
      }
      this.$refs[node].value = num - 1 < 10 ? "0" + (num - 1 + "") : num - 1;
      switch (node) {
        case "vyear":
          this.year = this.$refs[node].value;
          break;
        case "vmonth":
          this.month = this.$refs[node].value;
          break;
        case "vday":
          this.day = this.$refs[node].value;
          break;
      }
    }
  },
  data(){
      return {
        list:['p1','p2','p3','p4','p5','p6','p7','p8','p9','p10'],
        isLoadind:false,
        year: 0,
        month: 0,
        day: 0
      }
  },
  mounted() {
    Event.$on("isLoading",function(isLoading){
        this.isLoadind=isLoading;
        // '这里可以请求数据了！'
    }.bind(this));
    var nowDate = new Date();
    this.year = nowDate.getFullYear();
    this.month = nowDate.getMonth() + 1;
    this.day = nowDate.getDate();
    this.$refs.vyear.value = nowDate.getFullYear();
    this.$refs.vmonth.value = nowDate.getMonth() + 1;
    this.$refs.vday.value = nowDate.getDate();
  }
};
</script>

<style scoped>
.silde {
  height: 500px;
}
.bg{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
}
.bg1{
    background-image:url('../../assets/blue.png');
}
.bg2{
    background-image:url('../../assets/pink.png');
}
.bg3{
    background-image:url('../../assets/yellow.png');  
}


.test {
  position: absolute;
  top: 15%;
  width: 100%;
  font-size: 0;
  border-top: 0.02rem solid #ccc;
  border-bottom: 0.02rem solid #ccc;
  padding: 0.1rem;
}
.picker-top {
  width: 100%;
  height: 0.5rem;
}
.test > div[class^="picker"] {
  font-size: 0.12rem;
  display: inline-block;
  overflow: hidden;
  text-align: center;
}
.test ul {
  list-style: none;
}
.test ul > li {
  width: 1.5rem;
  height: 0.5rem;
  line-height: 0.5rem;
  background-color: #ccc;
  margin-left: 0.7rem;
}
.test ul input {
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
  text-align: center;
}
.picker-bot {
  width: 100%;
  margin-top: 0.2rem;
}
.picker-bot button {
  width: 45%;
}
</style>
